<template>
    <div class="hqcard">
        <Card dis-hover :bordered="false">
            <jgsearch :searchData="searchData" @on-enter="askDatasearch" @on-clear="askDatasearch"
                @on-change-change="askDatachanges" @on-change-changecheck="askDatacheck"
                @on-change-changeDepartment="changeDepartmentFun" />
            <div class="i-table-no-border">
                <Table highlight-row ref="table" :columns="columns" :loading="loading" :max-height="600" :data="data"
                    size="small">
                    <template slot="wechat" slot-scope="{ row }">
                        <a @click="openedits(row)">
                            <Avatar shape="square" size="large" class="ivu-fl" :src="row.avatar" />
                            <span class="ivu-ml-8">{{ row.nickname }}</span>
                            <br />
                            <span class="ivu-ml-8 ivu-weixin">微信号：{{ row.friend_wechatno }}</span>
                        </a>
                    </template>
                    <template slot-scope="{ row }" slot="state">
                        <Tag v-if="+row.clue_status === 7" color="primary">{{
                            row.status_name
                            }}</Tag>
                        <Tag v-else-if="+row.clue_status === 8" color="success">{{ row.status_name }}</Tag>
                        <Tag v-else-if="+row.clue_status === 6" color="default">{{ row.status_name }}</Tag>
                        <Tag v-else-if="+row.clue_status === 9" color="warning">{{ row.status_name }}</Tag>
                        <Tag v-else>{{ row.status_name }}</Tag>
                    </template>
                    <template slot-scope="{ row }" slot="tags">
                        <tag v-for="item in row.remark_tags" :key="item">{{
                            item
                            }}</tag>
                    </template>
                    <template slot-scope="{ row }" slot="info">
                        <span v-if="+row.clue_status === 8" class="person">{{
                            row.realname
                            }}</span>
                        <a href="javaScript:;" v-hasC="{
                                name: 'clue-user-contact3',
                                flag: 'v1/clue/user/contact',
                            }" v-else @click="openedits(row)">联系</a>
                        <!-- <a href="javaScript:;" @click="openedits(row)">联系</a> -->
                    </template>
                    <template slot-scope="{ row }" slot="source_type">
                        <span v-if="+row.source_type<10000 && +row.source_type !== 0">主动</span>
                        <span v-if="+row.source_type>10000">被动</span>
                    </template>
                </Table>
                <div class="ivu-mt ivu-text-center">
                    <Page show-total show-elevator show-sizer :total="total" :current.sync="params.page"
                        :page-size="params.pageSize" :page-size-opts="pageOpts" @on-change="changepage"
                        @on-page-size-change="changepageSize" />
                </div>
                <Drawer v-model="contactModal" width="960" @on-close="closedrawer">
                    <div v-if="isshows" style="margin-top: 30px;">
                        <div style="
                                display: flex;
                                align-items: center;
                                width: 100%;
                                justify-content: space-between;
                            ">
                            <div style="display: flex; align-items: center;" v-for="(item, index) in datacontent"
                                :key="index">
                                <div>
                                    <img class="headerImgs" :src="datacontent[0].avatar" alt="" />
                                </div>
                                <div style="margin-left: 10px;">
                                    <div style="
                                            font-size: 16px;
                                            font-weight: 900;
                                        ">
                                        {{ datacontent[0].nickname }}
                                    </div>
                                    <div>
                                        <span>
                                            微信号：
                                            {{
                                            datacontent[0].friend_wechatno ||
                                            datacontent[0].friendid
                                            }}
                                        </span>
                                        <span style="margin-left: 20px;">
                                            地区：
                                            {{
                                            datacontent[0].province +
                                            datacontent[0].city
                                            }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div v-if="currentBtnShow !== '8'">
                                <ButtonGroup>
                                    <Button v-if="
                                            +item.value !== 8 &&
                                                +item.value !== 9
                                        " v-for="(item,index) in clueList" :key="index"
                                        @click="handleContact(item.value)">{{ item.label }}</Button>
                                </ButtonGroup>
                                <Button style="margin-left: 30px;" type="primary" v-if="+item.value === 8"
                                    v-for="item in clueList" :key="item.value" @click="handleContact(item.value)">{{
                                    item.label }}</Button>
                            </div>
                        </div>
                    </div>
                    <Row :gutter="32">
                        <Col span="8">
                        <div style="margin-top: 18px;">
                            <Select v-model="currentWx" @on-change="changeWx">
                                <Option :value="item.value" v-for="(item,index) in otherWxList" :key="index">{{
                                    item.label
                                    }}</Option>
                            </Select>
                        </div>
                        <div class="ivu-mt-16">
                            <tag v-for="(item,
                                    index) in dataparamslist.tags_arr" :key="index">{{ item }}</tag>
                        </div>
                        <DescriptionList class="ivu-mt-16" :col="1">
                            <Description term="来源：">{{
                                dataparamslist.source_type_str
                                }}</Description>
                            <Description term="备注名：">{{
                                dataparamslist.remark_name
                                }}</Description>
                            <Description term="微信状态：">
                                <Badge status="success" v-if="+dataparamslist.state === 0"
                                    :text="dataparamslist.state_str" />
                                <Badge status="warning" v-else-if="+dataparamslist.state === 1"
                                    :text="dataparamslist.state_str" />
                                <Badge status="error" v-else-if="+dataparamslist.state === 2"
                                    :text="dataparamslist.state_str" />
                                <Badge status="warning" v-else-if="+dataparamslist.state === 3"
                                    :text="dataparamslist.state_str" />
                                <Badge status="error" v-else-if="+dataparamslist.state === 4"
                                    :text="dataparamslist.state_str" />
                            </Description>
                            <Description term="加好友天数：">{{
                                dataparamslist.create_day
                                }}</Description>
                            <Description term="未互动天数：">{{
                                dataparamslist.unchat_day
                                }}</Description>
                            <Description term="通过时间：">{{
                                dataparamslist.create_time
                                }}</Description>
                        </DescriptionList>
                        <Divider class="ivu-mt-8" />
                        <Timeline style="max-height: 400px; overflow: auto;">
                            <TimelineItem v-for="item in contactlist" :key="item.id">
                                <p class="time">{{ item.created_at }}</p>
                                <p class="content">{{ item.remark }}</p>
                                <p class="consultant">
                                    <span class="ivu-mr-8">{{
                                        item.realname
                                        }}</span>
                                    <Badge status="processing" :text="item.status_name" />
                                </p>
                            </TimelineItem>
                        </Timeline>
                        </Col>
                        <Col span="16">
                        <div class="sky-record ivu-mt-16">
                            <chatDetail :paramsrecord="paramsrecord" ref="liaotian" />
                        </div>
                        </Col>
                    </Row>
                </Drawer>
                <Modal title="处理信息" v-model="showedit" width="700" @on-cancel="canceledits('formDynamic')">
                    <Form ref="formDynamic" :model="paramsedits" label-position="top" :rules="createRuless">
                        <template v-if="!contactDatas">
                            <FormItem label="备注:">
                                <Input placeholder="请备注原因" v-model="paramsedits.remark" />
                            </FormItem>
                        </template>
                        <template v-if="contactDatas">
                            <FormItem :label-width="20">
                                <RadioGroup v-model="paramsedits.patient_user_id" @on-change="changeLabel">
                                    <Radio label="1">新客户</Radio>
                                    <Radio label="2">老客户</Radio>
                                </RadioGroup>
                            </FormItem>
                            <template v-if="paramsedits.patient_user_id === '2'">
                                <FormItem :label-width="20" prop="patient_user_id_1" :rules="oldNameRules">
                                    <Select style="width: 300px;" clearable v-model="paramsedits.patient_user_id_1"
                                        placeholder="请输入老患者姓名" filterable remote clearable :remote-method="remoteMethod"
                                        :loading="loadingcity" @on-change="changOld">
                                        <Avatar :src="
                                                require('../../assets/images/wx.png')
                                            " slot="prefix" size="small" v-show="showIcon" />
                                        <Option :value="item.value" v-for="item in oldPatient" :key="item.value">{{
                                            item.label }}</Option>
                                    </Select>
                                </FormItem>
                            </template>
                            <template v-if="paramsedits.patient_user_id === '1'">
                                <Row :gutter="24">
                                    <Col span="5">
                                    <FormItem label="姓名">
                                        <Input v-model="paramsedits.userName" placeholder="请输入姓名" />
                                    </FormItem>
                                    </Col>
                                    <Col span="6">
                                    <FormItem label="性别">
                                        <RadioGroup v-model="paramsedits.sex">
                                            <Radio :label="0">未知</Radio>
                                            <Radio :label="1">男</Radio>
                                            <Radio :label="2">女</Radio>
                                        </RadioGroup>
                                    </FormItem>
                                    </Col>
                                    <Col span="4">
                                    <FormItem label="年龄" prop="age">
                                        <InputNumber :max="100" :min="1" v-model="paramsedits.age"></InputNumber>
                                    </FormItem>
                                    </Col>
                                    <Col span="9">
                                    <FormItem label="城市" required>
                                        <!-- <Select ref="citySearch" v-model="paramsedits.city" placeholder="请输入城市拼音简写"
                                            filterable remote clearable :remote-method="remoteMethods"
                                            :loading="loadingcity">
                                            <Option v-for="item in optionscity" :value="item.value" :key="item.value">{{
                                                item.label }}</Option>
                                        </Select> -->
                                    <jgcheckcity ref="checkcity" @cityvalue="cityvalue" v-model="city_id" :name="`wechat`"/>
                                    </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter="24">
                                    <Col span="8">
                                    <FormItem label="手机号" prop="mobile">
                                        <Input v-model="paramsedits.mobile"
                                            @on-keyup="paramsedits.mobile=paramsedits.mobile.replace(/\s+|[\r\n]/g,'')"
                                            @on-blur="
                                                    telrepeat(
                                                        paramsedits.mobile
                                                    )
                                                " placeholder="请输入手机号" />
                                    </FormItem>
                                    </Col>
                                    <Col span="8">
                                    <FormItem label="微信号">
                                        <Input v-model="paramsedits.weChartNum"
                                            @on-keyup="paramsedits.weChartNum=paramsedits.weChartNum.replace(/\s+|[\r\n]/g,'')"
                                            @on-blur="
                                                    WXrepeat(
                                                        paramsedits.weChartNum
                                                    )
                                                " placeholder="请输入微信号" />
                                    </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter="24">
                                    <Col span="8">
                                    <FormItem label="一级病种" prop="oneDiseases">
                                        <Select placeholder="请选择一级病种" v-model="
                                                    paramsedits.oneDiseases
                                                " clearable @on-clear="clearOne" @on-change="changeOne">
                                            <Option v-for="item in diseasesArr1" :value="item.value" :key="item.value">
                                                {{ item.label }}</Option>
                                        </Select>
                                    </FormItem>
                                    </Col>
                                    <Col span="8">
                                    <FormItem label="二级病种" :rules="twoRules" prop="twoDiseases"
                                        v-show="diseasesArr2.length>0">
                                        <Select placeholder="请选择二级病种" v-model="
                                                    paramsedits.twoDiseases
                                                " clearable>
                                            <Option v-for="item in diseasesArr2" :value="item.value" :key="item.value">
                                                {{ item.label }}</Option>
                                        </Select>
                                    </FormItem>
                                    </Col>
                                    <Col span="8">
                                    <FormItem label="患者状态" prop="patientStatus">
                                        <Select placeholder="请选择" v-model="
                                                    paramsedits.patientStatus
                                                " clearable>
                                            <Option v-for="item in patientStatusArr" :value="item.value" :disabled="
                                                        +item.is_select === 0
                                                    " :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                    </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="12">
                                    <FormItem label="部位" prop="bodyPart" :rules="bodyPartRule">
                                        <TreeSelect :max-tag-count="2" v-model="paramsedits.bodyPart" :data="postList"
                                            clearable multiple />
                                    </FormItem>
                                    </Col>
                                </Row>
                                <template v-if="
                                        paramsedits.patientStatus === '2' ||
                                            paramsedits.patientStatus === '1'
                                    ">
                                    <FormItem label="下次回访时间" prop="day">
                                        <Row :gutter="16" type="flex">
                                            <Col>
                                            <InputNumber :formatter="$inputday" :step="1" :min="0" v-model.number="
                                                        paramsedits.day
                                                    " @on-change="
                                                        blurday(paramsedits.day)
                                                    ">
                                            </InputNumber>
                                            </Col>
                                            <Col>天后</Col>
                                            <Col>
                                            <DatePicker :editable="false" :options="optionss" type="date"
                                                v-model="DatePicker" @on-change="
                                                        changeday(DatePicker)
                                                    " placeholder="请输入回访时间">
                                            </DatePicker>
                                            </Col>
                                        </Row>
                                    </FormItem>
                                </template>
                                <template v-if="paramsedits.patientStatus === '1'">
                                    <FormItem label="预到时间" prop="day1">
                                        <Row :gutter="16" type="flex">
                                            <Col>
                                            <InputNumber :step="1" :min="0" v-model.number="
                                                        paramsedits.day1
                                                    " @on-change="
                                                        blurday1(
                                                            paramsedits.day1
                                                        )
                                                    ">
                                            </InputNumber>
                                            </Col>
                                            <Col>天后</Col>
                                            <Col>
                                            <DatePicker :editable="false" :options="optionss" type="date"
                                                v-model="DatePicker1" @on-change="
                                                        changeday1(DatePicker1)
                                                    " placeholder="请输入预约时间">
                                            </DatePicker>
                                            </Col>
                                        </Row>
                                    </FormItem>
                                </template>
                                <FormItem label="备注" prop="remark">
                                    <Input type="textarea" placeholder="请备注原因" v-model="paramsedits.remark"
                                        :autosize="{ minRows: 2, maxRows: 8 }" />
                                </FormItem>
                            </template>
                        </template>
                    </Form>
                    <div slot="footer">
                        <Button @click="canceledits('formDynamic')">取消</Button>
                        <Button type="primary" :loading="remarksloading"
                            @click="handlesearch('formDynamic')">确定</Button>
                    </div>
                </Modal>
            </div>
        </Card>
    </div>
</template>

<script>
    import jgsearch from "@/components/search";
    // import jgcheckcity from "@/components/checkcity";
    import chatDetail from "./chatrecord";
    import dayjs from "dayjs";
    import mixins from "@/mixins/mixins";
    let lodash = require("lodash");

    import {
        wechatusercluelist,
        wechatuserclueinfo,
        clueusercontact,
        concatWxPatient,
        wechatmessagelist,
        getOldPatient,
        patientindexsearchcity,
        patientindexsearchmobile,
    } from "@api/hqapi";
    export default {
        name: "wechat",
        components: { jgsearch, chatDetail },
        mixins: [mixins],
        data() {
            const validateMobile = (rule, value, callback) => {
                if (value === "") {
                    callback();
                } else {
                    let reg = /^\d{10,12}$/;
                    if (reg.test(value)) {
                        callback();
                    } else {
                        callback(new Error("请输入正确的联系号码"));
                    }
                }
            };
            return {
                city_id: [],
                source_type_list: [],
                otherWxList: [],
                postList: [],
                loadingcity: false,
                contactModal: false,
                contactDatas: true,
                oldPatient: [],
                params: {
                    page: 1,
                    pageSize: 10,
                    keyword: "",
                    department_id: "",
                    clue_status: "",
                    wechatno: "",
                    source_type: "",
                    have_repeat: 0,
                    operation_id: "",
                    start_time: new Date(),
                    end_time: new Date(),
                }, //  请求参数
                datacontent: [],
                currentWx: "",
                remarksloading: false,
                dataid: "",
                dataparamslist: {},
                columns: [
                    {
                        title: "微信信息",
                        slot: "wechat",
                        width: 280,
                        fixed: "left",
                    },
                    { title: "微信备注", key: "remark", minWidth: 168 },
                    { title: "微信标签", slot: "tags", minWidth: 150 },
                    {
                        title: "最近沟通时间",
                        key: "last_communication_time",
                        width: 180,
                    },
                    { title: "线索状态", slot: "state", width: 108 },
                    {
                        title: "客服微信号",
                        key: "wechatno",
                        minWidth: 180,
                        ellipsis: true,
                        tooltip: true,
                    },
                    {
                        title: "添加方式",
                        slot: "source_type",
                        minWidth: 120,
                        ellipsis: true,
                        tooltip: true,
                    },
                    { title: "归属部门", key: "department_name", width: 118 },
                    {
                        title: "联系人员",
                        key: "operation_name",
                        minWidth: 120,
                        ellipsis: true,
                        tooltip: true,
                    },
                    { title: "添加时间", key: "created_at", width: 180 },
                    { title: "操作", fixed: "right", slot: "info", width: 80 },
                ], // 列表表头
                data: [], // 列表数据
                currentBtnShow: "1",
                searchData: {
                    project: [
                        {
                            id: 1,
                            key: "Input",
                            placeholder: "请输入微信号/昵称",
                            clearable: true,
                            style: { width: "160px" },
                            value: "",
                        },
                        {
                            id: 2,
                            key: "Select",
                            placeholder: "线索状态",
                            clearable: true,
                            style: { width: "100px" },
                            value: "",
                            childList: [],
                            callback: "change",
                        },
                        {
                            id: 12,
                            key: "Select",
                            placeholder: "添加方式",
                            clearable: true,
                            style: { width: "100px" },
                            value: "",
                            childList: [],
                            callback: "change",
                        },
                        {
                            id: 3,
                            key: "Select",
                            placeholder: "部门",
                            clearable: true,
                            style: { width: "100px" },
                            value: "",
                            childList: [],
                            callback: "changeDepartment",
                        },
                        {
                            id: 6,
                            key: "Select",
                            placeholder: "客服微信号",
                            clearable: true,
                            style: { width: "180px" },
                            value: "",
                            childList: [],
                            callback: "change",
                        },
                        {
                            id: 5,
                            key: "Select",
                            placeholder: "联系人员",
                            clearable: true,
                            style: { width: "100px" },
                            value: "",
                            childList: [],
                            callback: "change",
                        },

                        {
                            id: 4,
                            key: "DatePicker",
                            type: "daterange",
                            style: { width: "200px" },
                            value: [new Date(), new Date()],
                            callback: "change",
                        },
                        {
                            id: 8,
                            key: "Checkbox",
                            style: { width: "100px" },
                            value: [],
                            childList: [{ label: "重复", value: 3 }],
                            callback: "changecheck",
                        },
                    ],
                },
                optionss: {
                    disabledDate(date) {
                        return (
                            date && date.valueOf() < Date.now() - 24 * 3600 * 1000
                        );
                    },
                },
                createRuless: {
                    mobile: [{ validator: validateMobile, trigger: "blur" }],

                    city_id: [
                        {
                            required: true,
                            message: "请选择城市",
                            trigger: "change",
                        },
                    ],
                    age: [
                        {
                            required: true,
                            message: "请填写年龄",
                            type: 'number',
                            trigger: 'blur,change'
                        },
                    ],
                    remark: [
                        {
                            required: false,
                        },
                    ],
                    oneDiseases: [
                        {
                            required: true,
                            message: "请选择一级病种",
                            trigger: "change",
                        },
                    ],
                    patientStatus: [
                        {
                            required: true,
                            message: "请选择患者状态",
                            trigger: "change",
                        },
                    ],
                    // patient_user_id_1: [
                    //     {
                    //         required: true,
                    //         message: "请选择老患者",
                    //         trigger: ["change",'blur'],
                    //     },
                    // ],
                    day: [
                        {
                            required: true,
                            type: "number",
                            message: "请输入回访时间",
                            trigger: "change",
                        },
                    ],
                    day1: [
                        {
                            required: true,
                            type: "number",
                            message: "请输入预约",
                            trigger: "change",
                        },
                    ],
                },
                optionscity: [],
                patientStatusArr: [],
                diseasesArr2: [],
                contactlist: [],
                diseasesArr1: [],
                showIcon: false,
                clueList: [],
                friend_wechatno: "",
                isshows: true,
                DatePicker: new Date(new Date().getTime() + 86400000),
                DatePicker1: new Date(new Date().getTime()),
                preBirthday: "",
                paramsedits: {
                    id: undefined,
                    clue_status_id: "",
                    remark: "",
                    day: 1,
                    bodyPart: [],
                    day1: 0,
                    type: 3,
                    patient_user_id: "1",
                    weChartNum: "",
                    mobile: "",
                    patient_user_id_1: "",
                    userName: "",
                    age: null,
                    birthday: "",
                    sex: "",
                    city_id: "",
                    oneDiseases: "",
                    twoDiseases: "",
                    patientStatus: "",
                },
                paramsrecord: { wechat_id: "", friend_id: "" },
            };
        },
        computed: {
            bodyPartRule() {
                if (this.paramsedits.oneDiseases === "1") {
                    return {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value.length) {
                                callback();
                            } else {
                                callback(new Error("请选择部位"));
                            }
                        },
                        trigger: "change",
                    };
                } else {
                    return {
                        required: false,
                        type: "array",
                        trigger: "change",
                    };
                }
            },
            twoRules() {
                if (this.diseasesArr2.length) {
                    return {
                        required: true,
                        message: "请选择二级病种",
                        trigger: "change",
                    };
                } else {
                    return {
                        required: false,
                    };
                }
            },
            dayRules() {
                if (this.paramsedits.patient_user_id === "1") {
                    return {
                        required: true,
                        type: "number",
                        message: "请输入下次回访时间",
                        trigger: "blur",
                    };
                } else {
                    return {
                        required: false,
                    };
                }
            },
            birthdays() {
                if (this.paramsedits.age !== "") {
                    var year = new Date().getFullYear() - this.paramsedits.age;
                    return year + "-01" + "-01";
                }
            },
            oldNameRules() {
                if (this.paramsedits.patient_user_id === "2") {
                    return {
                        required: true,
                        message: "请选择老患者姓名",
                        trigger: "change",
                    };
                } else {
                    return {
                        required: false,
                    };
                }
            },
        },
        // watch: {
        //     params: {
        //         deep: true,
        //         handler(value1, value2) {
        //             if (value1.department_id) {
        //                 console.log(value1.department_id, value2.department_id);
        //                 if (value1.department_id !== value2.department_id) {
        //                 }
        //             }
        //         },
        //     },
        // },
        methods: {
            cityvalue(city) {
                this.city_id = city
                this.paramsedits.city_id = city.join(',')
                
                // this.askData();
            },
            /* @函数功能: 初始化 */
            initial() {
                this.funaskData = wechatusercluelist;
                this.funupdate = concatWxPatient;
                this.askData();
            },
            changeLabel(value) {
                this.$refs.formDynamic.resetFields();
            },
            /* @函数功能: 请求数据 */
            askDatas(res) {
                this.clueList = res.clue_status;
                this.searchData.project.forEach((item) => {
                    if (item.id === 2) item.childList = res.clue_status;
                    else if (item.id === 3) item.childList = res.department;
                    else if (item.id === 5) item.childList = res.operation_member;
                    else if (item.id === 6) {
                        if (this.params.department_id) {
                            item.childList = res.wechatno
                                .filter(
                                    (ee) =>
                                        ee.department_id ===
                                        this.params.department_id
                                )
                                .map((vv) => {
                                    return {
                                        label: vv.wechatno,
                                        value: vv.wechatno,
                                        ...vv,
                                    };
                                });
                        } else {
                            item.childList = [];
                        }
                    } else if (item.id === 12) {
                        item.childList = res.source_type;
                    }
                });
                this.data = Object.freeze(res.list.list);
                this.total = res.list.total;
            },
            askDatacheck() {
                this.params.have_repeat = 0;
                this.searchData.project.forEach((item) => {
                    if (item.id === 8) {
                        item.value.forEach((its) => {
                            if (its === 3) {
                                this.params.have_repeat = 1;
                            }
                        });
                    } else if (item.id === 4) {
                        item.value = ["", ""];
                        this.params.start_time = "";
                        this.params.end_time = "";
                    }
                });
                this.askData();
            },
            /* @函数功能: 分页 */
            formSize(e) {
                this.params.page = e;
                this.askData();
            },
            /* @函数功能: 每页数量 */
            formChangePage(e) {
                this.params.pageSize = e;
                this.askData();
            },
            closedrawer() {
                this.$refs.formDynamic.resetFields();
                this.paramsedits = {
                    id: undefined,
                    clue_status_id: "",
                    remark: "",
                    day: 1,
                    weChartNum: "",
                    mobile: "",
                    day1: 0,
                    bodyPart: [],
                    type: 3,
                    patient_user_id: "1",
                    patient_user_id_1: "",
                    userName: "",
                    age: null,
                    birthday: "",
                    sex: "",
                    city_id: "",
                    oneDiseases: "",
                    twoDiseases: "",
                    patientStatus: "",
                };
                this.currentWx = "";
                this.diseasesArr1 = [];
                this.diseasesArr2 = [];
                this.askData();
            },
            clearOne() {
                this.diseasesArr2 = [];
                this.paramsedits.twoDiseases = "";
            },
            changeDepartmentFun(value) {
                this.searchData.project.forEach((item) => {
                    if (item.id === 6) {
                        item.value = "";
                        this.params.wechatno = "";
                        this.askDatachanges();
                    }
                });
            },
            changeOne(value) {
                if (value) {
                    this.paramsedits.twoDiseases = "";
                    this.diseasesArr2 = this.diseasesArr1.filter(
                        (ee) => ee.value == value
                    )[0].children;
                    if (!this.diseasesArr2.length) {
                        this.$nextTick(() => {
                            this.$refs.formDynamic.validateField("twoDiseases");
                        });
                    }
                }
            },
            searchparams() {
                this.params.keyword = this.searchDatas(1);
                if (this.searchDatas(1) !== "") {
                    if (
                        JSON.stringify(this.searchDatas(4)) !==
                        JSON.stringify(["", ""])
                    ) {
                        let timer = [
                            this.$Date(this.searchDatas(4)[0]).format("YYYY-MM-DD"),
                            this.$Date(this.searchDatas(4)[1]).format("YYYY-MM-DD"),
                        ];
                        this.storage.set("clue-wechat", timer);
                        this.searchData.project.forEach((item) => {
                            if (item.id === 4) item.value = ["", ""];
                        });
                        this.params.start_time = "";
                        this.params.end_time = "";
                    }
                } else {
                    this.searchData.project.forEach((item) => {
                        if (item.id === 4) {
                            if (
                                JSON.stringify(this.storage.get("clue-wechat")) !==
                                JSON.stringify(["", ""])
                            ) {
                                item.value = this.storage.get("clue-wechat");
                                this.params.start_time = item.value[0];
                                this.params.end_time = item.value[1];
                            }
                        }
                    });
                }
                this.params.page = 1;
                this.params.pageSize = 15;
                this.params.clue_status = "";
                this.params.department_id = "";
                this.params.wechatno = "";
                this.params.source_type = "";
                this.params.operation_id = "";
                this.params.wechatid = "";
                // this.params = {
                //     page: 1,
                //     pageSize: 10,
                //     keyword: this.searchDatas(1),
                //     department_id: "",
                //     clue_status: "",
                //     operation_id: "",
                //     wechatno: "",
                //     start_time: "",
                //     end_time: "",
                // };
                this.searchData.project.forEach((item) => {
                    if (item.id === 2) item.value = "";
                    if (item.id === 3) item.value = "";
                    if (item.id === 5) item.value = "";
                    if (item.id === 6) item.value = "";
                    // if (item.id === 4) item.value = ["", ""];
                });
            },
            searchDatas(num) {
                let value;
                this.searchData.project.forEach((item) => {
                    if (item.id === num) value = item.value;
                });
                return value;
            },
            askDatachanges(value) {
                this.params = {
                    page: 1,
                    pageSize: 10,
                    source_type: this.searchDatas(12),
                    keyword: this.searchDatas(1),
                    department_id: this.searchDatas(3),
                    operation_id: this.searchDatas(5),
                    wechatno: this.searchDatas(6),
                    clue_status: this.searchDatas(2),
                    start_time: this.searchDatas(4)[0],
                    end_time: this.searchDatas(4)[1],
                };
                let timer = ["", ""];
                if (
                    JSON.stringify(this.searchDatas(4)) !== JSON.stringify(["", ""])
                ) {
                    timer = [
                        this.$Date(this.searchDatas(4)[0]).format("YYYY-MM-DD"),
                        this.$Date(this.searchDatas(4)[1]).format("YYYY-MM-DD"),
                    ];
                }
                this.storage.set("clue-wechat", timer);
                this.askDatachange();
            },
            openedits(row) {
                this.currentBtnShow = row.clue_status;
                this.$refs.formDynamic.resetFields()
                this.paramsedits.id = row.id;
                this.paramsedits.weChartNum = row.friend_wechatno;
                this.friend_wechatno = row.friend_wechatno;
                this.axiosWxInfo(this.friend_wechatno, this.paramsedits.id);
            },
            axiosWxInfo(friend_wechatno, id, value) {
                wechatuserclueinfo({
                    friend_wechatno,
                    id,
                }).then((res) => {
                    this.datacontent = res.list;
                    if (res.list.length > 0) {
                        this.dataparams(res.list[0].id);
                        this.currentWx = this.currentWx
                            ? this.currentWx
                            : res.list[0].wechat_list[0].wechatid;
                    }
                    if (
                        res.default_city &&
                        JSON.stringify(res.default_city) !== "{}"
                    ) {
                        this.optionscity = [
                            {
                                value: res.default_city.city_id,
                                label: res.default_city.city_name,
                            },
                        ];
                    }
                    this.postList = res.body_parts_list
                    this.contactlist = res.contact;
                    this.diseasesArr1 = res.diseases;
                    this.patientStatusArr = res.patient_status;
                    this.paramsedits.patientStatus = "2";
                    this.contactModal = true;
                });
            },
            changOld(value) {
                if (this.oldPatient.length && value) {
                    let one = this.oldPatient.find(
                        (ee) => ee.patient_user_id === value
                    );
                    if (one.wechat_id === "") {
                        this.showIcon = false;
                    } else {
                        this.showIcon = true;
                    }
                } else {
                    this.showIcon = false;
                }
            },
            wechatmessagelists(row) {
                this.otherWxList = row.wechat_list.map((ee) => {
                    return {
                        ...ee,
                        value: ee.wechatid,
                        label: ee.wechatnick,
                        friend_wechatno: ee.wechatno,
                    };
                });

                this.paramsrecord.wechat_id = row.wechat_list[0].wechatid;
                // this.currentWx = row.wechat_list[0].wechatid;
                this.paramsrecord.friend_id = row.friendid;
                this.$nextTick(() => {
                    this.$refs.liaotian.askDatas("end");
                });
            },
            dataparams(id) {
                this.dataid = id;
                this.datacontent.forEach((item) => {
                    if (item.id === id) {
                        this.dataparamslist = item.wechat_list[0];
                        this.wechatmessagelists(item);
                    }
                });
            },
            getDatas: lodash.debounce(function (params) {
                if (this.oldPatient.every((ee) => ee.label !== params)) {
                    this.loadingcity = true;
                    getOldPatient({
                        user_name: params,
                    }).then((res) => {
                        this.$nextTick(() => {
                            this.loadingcity = false;
                            this.oldPatient = Object.freeze(
                                res.map((ee) => {
                                    return {
                                        ...ee,
                                        value: ee.patient_user_id,
                                        label:
                                            ee.user_name +
                                            " " +
                                            (ee.gender === "0"
                                                ? "未知"
                                                : ee.gender === "1"
                                                    ? "男"
                                                    : "女") +
                                            " " +
                                            ee.age +
                                            (ee.age ? "岁" : "") +
                                            " " +
                                            ee.mobile,
                                    };
                                })
                            );
                        });
                    });
                }
            }, 700),
            remoteMethod(query) {
                if (query !== "") {
                    this.getDatas(query);
                } else {
                    this.oldPatient = [];
                }
            },
            remoteMethods(query) {
                if (query !== "") {
                    this.getDatass(query);
                } else {
                    this.optionscity = [];
                }
            },
            getDatass: lodash.debounce(function (params) {
                if (this.optionscity.every((ee) => ee.label !== params)) {
                    this.loadingcity = true;
                    patientindexsearchcity({
                        keywords: params,
                    }).then((res) => {
                        this.$nextTick(() => {
                            this.loadingcity = false;
                            this.optionscity = Object.freeze(
                                res.list.map((ee) => {
                                    return {
                                        value: ee.value + "," + params,
                                        label: ee.label,
                                    };
                                })
                            );
                        });
                    });
                }
            }, 700),
            handleContact(state) {
                this.paramsedits.clue_status_id = state;
                this.openedit(state);
                for (let item of this.clueList) {
                    if (state === item.value) {
                        if (+item.value === 8) {
                            // this.paramsedits.patient_user_id = "1";
                            this.contactDatas = true;
                        } else {
                            this.contactDatas = false;
                        }
                    }
                }
            },
            changeWx(value) {
                if(value){
                    let friend_wechatno = this.otherWxList.find(
                        (ee) => ee.wechatid === value
                    ).wechatno;
                    this.dataparamslist = this.datacontent[0].wechat_list.filter(ee=>ee.wechatid === value)[0]
                    this.axiosWxInfo(friend_wechatno, this.paramsedits.id, value);
                    this.$set(this.paramsrecord, "wechat_id", value);
                    // this.currentWx = value

                    // this.$nextTick(() => {
                    //     this.$refs.liaotian.askDatas("end");
                    // });
                }
            },
            paramsedit() {
                this.paramsedits.day = 1;
                this.paramsedits.remark = "";
                this.DatePicker = new Date(new Date().getTime() + 86400000);
            },
            paramscancel() {
                this.paramsedit();
            },
            /* @函数功能: 取消编辑或新增 */

            canceledits(name) {
                // if (name) this.$refs[name].resetFields();
                
                this.city_id = []
                this.showedit = false;
                // this.paramscancel();
            },
            /* @函数功能: 提交编辑或新增 */

            // 搜索手机号
            handlesearch(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.city_id = []
                        if (this.paramsedits.clue_status_id === "8") {
                            this.remarksloading = true;
                            let config = {
                                id:
                                    this.paramsedits.id === undefined
                                        ? 0
                                        : this.paramsedits.id,
                                mobile: this.paramsedits.mobile,
                                wechat_id: this.paramsedits.weChartNum,
                            };
                            patientindexsearchmobile(config).then((res) => {
                                if (+res.result === 1) {
                                    this.$Modal.confirm({
                                        title: "提示",
                                        content: `<p>该手机号码已存在，是否继续录入?</p>`,
                                        onOk: () => {
                                            this.submitedits(name);
                                        },
                                        onCancel: () => {
                                            this.remarksloading = false;
                                        },
                                    });
                                } else if (+res.result === 2) {
                                    this.$Modal.confirm({
                                        title: "提示",
                                        content: `<p>该微信号已存在，是否继续录入?</p>`,
                                        onOk: () => {
                                            this.submitedits(name);
                                        },
                                        onCancel: () => {
                                            this.remarksloading = false;
                                        },
                                    });
                                } else if (+res.result === 3) {
                                    this.$Modal.confirm({
                                        title: "提示",
                                        content: `<p>该手机号/微信号已存在，是否继续录入?</p>`,
                                        onOk: () => {
                                            this.submitedits(name);
                                        },
                                        onCancel: () => {
                                            this.remarksloading = false;
                                        },
                                    });
                                } else {
                                    this.submitedits(name);
                                }
                            });
                        } else {
                            this.submitedits(name);
                        }
                    }
                });
            },
            submitedits(name) {
                if (name) {
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.submiteditss();
                        }
                    });
                } else {
                    this.submiteditss();
                }
            },
            submiteditss() {
                let config = this.paramssubmit();
                if (config) {
                    this.remarksloading = true;
                    if (!this.edits) {
                        this.funupdate(config).then((res) => {
                            this.remarksloading = false;
                            if (+res.clue_status_id === 8) {
                                this.contactModal = false;
                                this.showedit = false;
                                this.askData();
                                this.diseasesArr2 = [];
                                this.paramsedits = {
                                    id: undefined,
                                    clue_status_id: "",
                                    remark: "",
                                    day: 1,
                                    day1: 0,
                                    weChartNum: "",
                                    mobile: "",
                                    type: 3,
                                    bodyPart: [],
                                    patient_user_id: "1",
                                    patient_user_id_1: "",
                                    userName: "",
                                    age: null,
                                    birthday: "",
                                    sex: "",
                                    city_id: "",
                                    oneDiseases: "",
                                    twoDiseases: "",
                                    patientStatus: "",
                                };
                                this.$refs.formDynamic.resetFields();
                            } else {
                                this.beforsubmits();
                            }
                        });
                    } else {
                        this.funcreate(config).then(() => {
                            this.remarksloading = false;
                            this.beforsubmits();
                        });
                    }
                }
            },
            /* @函数功能: 提交之后数据处理 */
            beforsubmits() {
                this.$Message.success("处理成功");
                this.paramscancel();
                this.openedits({
                    id: this.paramsedits.id,
                    friend_wechatno: this.friend_wechatno,
                });
                this.city_id = []
                this.showedit = false;
            },
            telrepeat(data) {
                let config = {
                    id: this.paramsedits.id === undefined ? 0 : this.paramsedits.id,
                    mobile: data,
                };
                patientindexsearchmobile(config).then((res) => {
                    if (+res.result === 1) {
                        this.$Message.error({
                            duration: 2.5,
                            content: "该手机号码已存在",
                        });
                    }
                });
            },
            WXrepeat(data) {
                let config = {
                    id: this.paramsedits.id === undefined ? 0 : this.paramsedits.id,
                    wechat_id: data,
                };

                patientindexsearchmobile(config).then((res) => {
                    if (+res.result === 2) {
                        this.$Message.error({
                            duration: 2.5,
                            content: "该微信号已存在",
                        });
                    }
                });
            },
            paramssubmit() {
                let config = {
                    id: this.paramsedits.id,
                    clue_status_id: this.paramsedits.clue_status_id,
                    day: parseInt(new Date(this.DatePicker).getTime() / 1000),
                    type: 3,
                    patient_status_id:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.patientStatus
                            : "",
                    user_name:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.userName
                            : "",
                    age:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.age
                            : "",
                    // birthday:
                    //     this.paramsedits.clue_status_id === "8"
                    //         ? this.paramsedits.age === this.preBirthday
                    //             ? this.paramsedits.birthday
                    //                 ? this.paramsedits.birthday
                    //                 : this.birthdays
                    //             : this.birthdays
                    //         : "",
                    birthday:
                        this.paramsedits.clue_status_id === "8"
                            ? this.birthdays
                            : "",
                    patient_diseases_id:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.oneDiseases
                            : "",
                    patient_diseases_child_id:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.twoDiseases
                            : "",
                    patient_remake:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.remark
                            : "",
                    city_id: this.paramsedits.clue_status_id === "8" ? this.paramsedits.city_id : "",

                    appointment_day: parseInt(
                        new Date(this.DatePicker1).getTime() / 1000
                    ),
                    gender:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.sex
                            : "",
                    // city_name: this.paramsedits.city
                    //     ? this.optionscity.filter(
                    //         (ee) => ee.value === this.paramsedits.city
                    //     )[0].label
                    //     : "",
                    patient_user_id:
                        this.paramsedits.patient_user_id === "2"
                            ? this.paramsedits.patient_user_id_1
                            : "",
                    friend_wechatno:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.weChartNum
                            : "",
                    mobile:
                        this.paramsedits.clue_status_id === "8"
                            ? this.paramsedits.mobile
                            : "",
                    body_parts_id: this.paramsedits.clue_status_id === "8"
                        ? this.paramsedits.bodyPart.join(',')
                        : "",
                };
                let config1 = {
                    id: this.paramsedits.id,
                    clue_status_id: this.paramsedits.clue_status_id,
                    remark: this.paramsedits.remark,
                    day: 1,
                    type: 3,
                };
                return this.paramsedits.clue_status_id === "8" ? config : config1;
            },
            blurday(num) {
                this.DatePicker = this.$blurday(num);
            },
            changeday(date) {
                this.paramsedits.day = this.$changeday(date);
            },
            blurday1(num) {
                this.DatePicker1 = this.$blurday(num);
            },
            changeday1(date) {
                this.paramsedits.day1 = this.$changeday(date);
            },
        },
    };
</script>

<style scoped>
    .headerImgs {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
    }

    .ivu-weixin {
        color: #777;
        font-size: 12px;
    }

    .sky-wxid {
        color: #777;
        margin-top: 2px;
        font-size: 12px;
    }

    .sky-record {
        /* border: 1px solid #dcdcdc; */
        min-height: 600px;
    }

    .ivu-active {
        border: 1px solid #2d8cf0;
    }

    .ivu-active:hover {
        border: 1px solid #2d8cf0 !important;
    }

    .person {
        color: #999;
    }

    /* 时间轴 */
    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding: 10px 0;
    }

    .consultant {
        color: #9ea7b4;
    }

    h4 span {
        margin-left: 5px;
    }

    .side-bg {
        background: #f2f2f2;
        padding: 24px !important;
    }

    .return-form {
        padding: 24px;
    }

    .title {
        font-weight: bold;
        font-size: 16px;
        padding: 24px 0 0 24px;
    }

    .sky-screen {
        margin-top: 16px;
    }

    .sky-s1 {
        font-size: 14px;
        margin: 0 16px;
        color: #666;
    }

    .sky-s2 {
        font-size: 12px;
        margin-right: 10px;
        color: #888;
    }

    .sky-note {
        padding: 5px 0;
    }
</style>
<style scoped></style>